<template>
    <el-cascader
        ref="cascader"
        v-model="selectId"
        :options="options"
        :props="optionProps"
        :show-all-levels="false"
        clearable
        :size="size"
        @change="changeLevel">
        <template slot-scope="{ data }">
            <span @click="handleSelect">{{data.name}}</span>
        </template>
    </el-cascader>
</template>
<script>
export default {
    model:{
        prop: "value",
    },
    props: {
        options:{
            required: true,
            type: Array,
            default() {
                return [];
            }
        },
        size:{
            required: false,
            type: String,
            default:""
        }
    },
    data(){
        return{
            selectId: this.value,
            optionProps: {
                value: 'grade_id',
                label: 'name',
                // children: 'children',
                checkStrictly: true,
                expandTrigger: 'click'
            },
        }
    },
    watch:{
        selectId:{ 
            handler() {
                if (this.$refs.cascader) { 
                    var children = this.$refs.cascader.getCheckedNodes();
                    // if(children.length>0&&children[0].children.length < 1){   //判断chilren是否为空
                        this.$refs.cascader.dropDownVisible = false; //选中之后，关闭下拉框
                    // }
                }
            },immediate:true
        }
    },
    methods: {
        changeLevel(){
            this.$emit("input", this.selectId)
        },
        handleSelect(e){
            let parentPreviousElement = e.target.parentElement.previousElementSibling
            let inputRadio = parentPreviousElement.children[0].children[1]
            inputRadio.click()
        }
    },
}

</script>

